<template>
	<view id="AncestralTemple" class="digital-page">
		<view class="top-banner">
			<image src="../../static/Dp/Logo_487x93.png" mode="widthFix"></image>
		</view>
		<view class="banner">
			<view class="title-area">
				<view class="title-cn">宗祠家庙</view>
				<view class="title-en">Ancestral temple</view>
			</view>
		</view>
		<view class="main-content">
			<template v-for="(v, k) in data" :key="k" >
				<view class="block">
					<view class="header">
						{{ v.Topic }}
					</view>
					<image class="img" :src="domain + v.FeaturedImage" mode="widthFix"></image>
					<rich-text :nodes="v.nodes" class="content"  @click="richTextClick(v.imgs)"></rich-text>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>	
	// 朱熙然 @ 2023年4月21日 
	// 姚珅 @ 2023年5月8日 绑定
	// 姚珅 @ 5月21日 返回组件添加以及绑定修改
	import { onLoad } from '@dcloudio/uni-app'
	import backBtn from './back.vue'
	import { ref } from 'vue'
	import parseHtmlData from './parseHtmlData.js'
	import { domain } from '@/stores/useApp.js'
	import setShare from '../../share.js'
	setShare({
		title: '宗祠家庙 - 云上埔坪',
		path: "/pages/DigitalPlatform/AncestralTemple"
	});
	let uniqueCode = "0YFEOYZXFCyzaUwTQ2Anm8";
	let data = ref([]);
	
	uni.post("/api/categorySource", {
		uniqueCode,
		hasContent: true,
		page: 1,
		pageSize: 10
	}).then(msg => {
		for (let d of msg.data) {
			let { nodes, imgs } = parseHtmlData(d.Content);
			d.nodes = nodes;
			d.imgs = imgs;
			data.value.push(d);
		}
	});
	
	function richTextClick (imgs) {
		if (imgs.length) {
			wx.previewImage({
				current: imgs[0], // 当前显示图片的http链接
				urls: imgs
			})
		}
	}
</script>

<style lang="less">
	@import url(shared.less);
	@content-size: 25rpx;
	@title-behind-size: 30rpx;
	@left-size:10rpx;
	
	#AncestralTemple{
		.banner {
			.show-bg("https://www.lin-home.com/static/DigitalPlatform/06宗祠家庙/banner.jpg")
		}
		.title-area {
			width: calc(32rpx * 18);
		}
		
		.main-content {
			.block .img {
				border-radius: 10px;
				width: 100%;
			}
		}
	}
	
</style>